<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>插槽</title>
  <script src="./vue.js"></script>
</head>
<body>
  <div id="root">
    <child>
      <!-- <div class="header" slot="header">header</div> -->
      <div class="footer" slot="footer">footer</div>     
    </child>
  </div>
  
  <script>
    // 插槽： 父组件向自组件传递dom元素
    // 具名插槽，给插槽命名，引用的时候，加上名字即可
    // 从父组件中引入页面头部和尾部
    Vue.component('child', {
      template: `
          <div>
            <slot name="header"><div>默认值</div></slot>
            <p>content</p>
            <slot name="footer"></slot>            
          </div>`
    })

    var vm = new Vue({
      el: '#root'
    })
  </script>
</body>
</html>